<template>
    <div id="newProduct">
        <div class="newProductListWrapper">
            <section>
                <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :topDistance="20" :bottomDistance="20" :topPullText="topPullText" :topDropText="topDropText" :bottomPullText="bottomPullText" :auto-fill="false">
                    <div :class="y%2==0?'newProductList flo-l':'newProductList flo-r'" v-for="(x,y) in list" :id="x.pro_id" :type="x.id_type" @click="goNewDetail(x.pro_id,x.id_type)" :key="y">
                        <header>
                            <dl>
                                <dd><img :src="x.pro_img"></dd>
                                <dt style="text-align: left">{{x.subtitle}}</dt>
                            </dl>
                        </header>
                        <footer>
                            <div>
                                <span class="flo-l" style="line-height: .4rem;">
                                    <span class="priceColor" style="font-size:.34rem;">
                                        <span class="priceColor flo-l" style="font-size:.24rem;">￥</span>{{x.pro_low_price}}
                                    </span>
                                </span>
                                <span class="flo-r" style="color:#969696;">已砍{{x.pro_sells}}件</span>
                            </div>
                        </footer>
                    </div>
                </mt-loadmore>
                <span v-if="lookMore" style="font-size: .26rem;color: #969696;text-align: center;display: block;">下拉查看更多</span>
            </section>
        </div>
    </div>
</template>

<script>
import Nav from "../home/nav.vue";
import config from "../config/config.js";
import share from "../share/share.js";
import MtaH5 from "mta-h5-analysis";
export default {
    data() {
        return {
            list: [],
            allLoaded: Boolean,
            topPullText: "",
            bottomPullText: "",
            topDropText: "下拉刷新",
            pageSize: 1,
            lookMore: false
        };
    },
    components: {
        "v-nav": Nav
    },
    methods: {
        getViewInfo(pageSize) {
            var value = JSON.stringify({
                    page: pageSize,
                    tag: 2,
                    token: localStorage.getItem("token")
                }),
                key = demo(value);
            axios
                .post(
                    "/Home/home/HomeBottomButton",
                    {
                        value: value,
                        key: key
                    },
                    config
                )
                .then(
                    function(response) {
                        if (response.data.code == 200) {
                            if (pageSize == 1) {
                                this.list = response.data.data.list;
                            } else {
                                this.list = this.list.concat(
                                    response.data.data.list
                                );
                            }
                            if (response.data.data.listNum == pageSize) {
                                this.$nextTick(function() {
                                    this.allLoaded = true;
                                    this.lookMore = false;
                                });
                            } else {
                                this.$nextTick(function() {
                                    this.allLoaded = false;
                                    this.lookMore = true;
                                });
                            }
                        }
                    }.bind(this)
                )
                .catch(function(error) {
                    console.log(error);
                });
        },
        goNewDetail(id, type) {
            this.$router.push("/newDetail/" + id + "/" + type);
        },
        loadBottom() {
            var self = this;
            self.lookMore = false;
            setTimeout(function() {
                self.pageSize++;
                self.getViewInfo(self.pageSize);
                self.$refs.loadmore.onBottomLoaded();
            }, 500);
        },
        scrollEvent(e) {
            sessionStorage.setItem("pTop", e.target.scrollTop);
        }
    },
    activated() {
        var that = this;
        document
            .getElementById("home")
            .addEventListener("scroll", this.scrollEvent);
        if (sessionStorage.getItem("pTop")) {
            document.getElementById("home").scrollTop = sessionStorage.getItem(
                "pTop"
            );
        }
        this.getViewInfo(this.pageSize);
        share({});
        MtaH5.init({
            sid: "500594815",
            cid: "500595819",
            autoReport: 0,
            senseHash: 0,
            senseQuery: 0,
            performanceMonitor: 0,
            ignoreParams: []
        });
        MtaH5.pgv();
    },
    deactivated() {
        document
            .getElementById("home")
            .removeEventListener("scroll", this.scrollEvent);
    },
    beforeDestroy() {
        document
            .getElementById("home")
            .removeEventListener("scroll", this.scrollEvent);
    }
};
</script>

<style>
</style>